<template>
  <div>


    <tiny-row>
      <tiny-col :span="1" :no="1">
        opentiny图标库      
         <vo-icon iconName="pause"  color="#40d322"></vo-icon>
      </tiny-col>
      <!-- <tiny-col :span="2" :no="1">
            <span>图标下拉</span>
          <vo-select icons v-model:value="data.menuIcon" />
      </tiny-col> -->
      <tiny-col :span="1" :no="1">
          <vo-selects icon v-model:value="data.icon"  />
       
      </tiny-col>

      <!-- <tiny-col :span="1" :no="1">
        <tiny-popover trigger="click" :visible-arrow="false" :width="600" :height="600" v-model="data.visible" >
          <div class="tintPopover">
            <template v-for="(value, key) in categorys">
              <template v-for="(items, key) in value">
                <div>{{ key }}</div>
                <ul class="auto-wrap-list">
                  <template v-for="(item,index) in items">
                    <li class="vo_icon" @click="checkedIcon(item.name)">
                        <tiny-tooltip placement="bottom" effect="light">
                          <template #content> {{ item.nameCn }}</template>
                          <i :class="iconsClass(item)" style="font-size:24px; color:#40d322;"></i>
                        </tiny-tooltip>
                      </li>
                  </template>
                </ul>
              </template>
          
            </template>
          </div>
            <template #reference>
              <tiny-input v-model="data.icon" @click="focus">
                <template #prefix>
                  <i :class="iconshow()" style="color:#40d322;"></i>
                </template>
              </tiny-input>
        </template> 
 
      </tiny-popover> 

      </tiny-col> -->
        
    </tiny-row>
    <tiny-divider color="#40d322"></tiny-divider>
    
    <template v-for="(value, key) in categorys">
      <div class="icon-list" v-for="(value, key) in value">
        <div>{{ key }}</div>
        <tiny-divider color="#40d322"></tiny-divider>
        <ul class="demo-icon-list"  >
          <li v-for="(item, key) in iconOrder(value)"  class="icon-item" @click="changeIcon(item.name)">
            <span class="demo-svg-icon">
              <i :class="iconsClass(item)" style="font-size:30px; color:#40d322;"></i>
              <span class="icon-name">{{ item.nameCn }}</span>
              <span >{{ item.name  }}</span>
            </span>
          </li>
        </ul>
      </div>
    </template>

    <span>iconfont图标库</span>
    <div class="icon-list">
      <ul class="demo-icon-list">
        <li v-for="(item, num) in icons.glyphs"  class="icon-item" @click="changeIcon(item.font_class)">
          <span class="demo-svg-icon">
            <vo-icon :iconName="item.font_class"></vo-icon>
            <span class="icon-name">{{ item.name }}</span>
            <span >{{ item.font_class  }}</span>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
  import useClipboard from 'vue-clipboard3';
  import "@opentiny/icons/style/all.css"
  import  {categorys} from "@opentiny/icons/categorys"
  import axios from 'axios'
  import {Modal, Popover as TinyPopover} from '@opentiny/vue';
  import { reactive, ref, toRefs, onMounted, getCurrentInstance } from 'vue';
  const data = reactive({
    iconTiny:[],
    icon:"start1",
    visible:false,
  })
  let { proxy } = getCurrentInstance();
  onMounted(() => {
    //获取第三方图标
    getYuIcon();
    console.log(categorys)
  });
  //显示图标
  const iconshow =() =>{
    return "ci-"+data.icon;
  }
  const iconsClass =(item) =>{
    return "ci-"+item.name;
  }
  //排序
  const iconOrder =(data) =>{
    const sortedData = data.sort((a, b) => a.order - b.order);
    return sortedData;
  }
  const { toClipboard } = useClipboard();
  const icons = ref({});
  const getYuIcon = () => {
    axios.get('./iconfont.json').then(res=>{
      icons.value = res.data;
    })
    // proxy.$api.system.getVoIcon().then(res => {
    //   icons.value = res;
    //   console.log(res)
    // });
  };
  const focus = () => {
    data.visible = true;
  };
  //选择图标
  const checkedIcon =(icon) =>{
    data.icon = icon;
    data.visible = false;
  }
  const changeIcon = icon => {
    toClipboard(icon);
    console.log(icon);
    Modal.message({
      message: '复制成功',
      status: 'success',
    });
  };
</script>
<style lang="scss" scoped>
  .icon-list {
    width: 100%;
    // height: 100vh;
  }
  .icon-name {
    padding-top: 8px;
  }
  .demo-icon-list {
    overflow: hidden;
    list-style: none;
    padding: 0 !important;
    border-top: 1px solid var(--tv-base-color-success-3);
    border-left: 1px solid var(--tv-base-color-success-3);
    border-radius: 4px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
  }
  .icon-item {
    cursor: pointer;
    text-align: center;
    color: var(--el-text-color-regular);
    height: 90px;
    font-size: 13px;
    border-right: 1px solid var(--tv-base-color-success-3);
    border-bottom: 1px solid var(--tv-base-color-success-3);
    transition: background-color var(--el-transition-duration);
    :hover {
      background-color: #f5f7fa;
    }
  }
  .demo-svg-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    // cursor: pointer;
  }
  .svg-icon {
    --color: inherit;
    height: 2em;
    width: 2em;
    line-height: 2em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    fill: currentColor;
    color: var(--color);
    font-size: inherit;
    svg {
      height: 1.5em;
      width: 1.5em;
    }
  }
  .svg-icon:hover {
    font-size: 40px;
  }
  .auto-wrap-list {
    overflow: hidden;
    list-style: none;
   
    border-top: 1px solid var(--tv-base-color-success-3);
    border-left: 1px solid var(--tv-base-color-success-3);
    border-radius: 4px;
    display: grid;

    grid-template-columns: repeat(10, 1fr);

    .vo_icon{
    padding: 10px;
    cursor: pointer;
    border-right: 1px solid var(--tv-base-color-success-3);
    border-bottom: 1px solid var(--tv-base-color-success-3);
    text-align: center;
    }
  }
  .tintPopover{
    height: 580px;
    width: 560px;


  overflow-y: auto;
  /* 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;  /* IE 和 Edge */
  scrollbar-width: none;  /* Firefox */
}
</style>
